<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        省份：
        <select id="selPro">
    
        </select>
    </div>
    <div>
        城市：
        <select id="selCity">
    
        </select>
    </div>
    <div>
        区县：
        <select id="selArea">
    
        </select>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function setCity(data,t) {
            var city;
            var prov = t.val();
            $("#selCity").empty();
            $('#selArea').empty();
            for (var i = 0; i < data.length; i++) {
                if (data[i].name == prov) {
                    city = data[i].city;
                }
            }
            $.each(city, function (i, c) {
                $('<option></option>').text(c.name).val(c.name).appendTo($('#selCity'));
            })
        }
        function setArea(data,t) {
            var area;
            var city = t.val();
            $('#selArea').empty();
            for (var i = 0; i < data.length; i++) {
                for (var j = 0; j < data[i].city.length; j++) {
                    if (data[i].city[j].name == city) {
                        area = data[i].city[j].area;
                    }
                }
            }
            $.each(area, function (i, a) {
                $('<option></option>').text(a).val(a).appendTo($('#selArea'));
            })
        }
        $(function () {
            var settings = {
                url: '..pca.json',//发送网络请求的地址
                type: 'get',//请求方式 默认GET,POST
                cache: false,//不缓存此页面
                dataType: 'json',//预期服务器返回的数据类型
                success: function (data) {//请求成功后的回调函数
                    //response|data 服务器响应的数据
                    $.each(data, function (index, p) {
                        $('<option></option>').text(p.name).val(p.name).appendTo($('#selPro'));
                    });
                    setCity(data,$('#selPro'));
                    setArea(data,$('#selCity'));
                    
                    $('#selPro').on('change', function () {
                        setCity(data,$(this));
                        setArea(data,$('#selCity'));
                    });
    
                    $('#selCity').on('change', function () {
                        setArea(data,$(this));
                    })
                },
                error: function (xhr, textStatus, textStatus) {//请求失败后的回调函数
                    console.table('出错了');
                }
            }
            $.ajax(settings);
        })
    </script>
</body>
</html>